<script>
export default {
  name: "MyTransition"
}
</script>

<template>
  <div>
    <transition name="lhy">
      <slot></slot>
    </transition>
  </div>
</template>

<style scoped>
.lhy-enter-active{
  animation: lhyanimate 1s;
}
.lhy-leave-active{
  animation: lhyanimate 1s reverse;
}

@keyframes lhyanimate {
  0%{
    transform: translateX(100px);
    opacity: 0;
  }
  100%{
    transform: translateX(0);
    opacity: 1;
  }
}
</style>